<template>
  <el-dialog
          :model-value="dialogColumnVisible"
          :title="dialogColumnStatus == 'create' ? '新建栏目' : '编辑栏目'"
          :before-close="handleCancelColumnDialog"
          width="30%"
  >
    <el-form
            ref="columnFormDataRef"
            :model="formData"
            :rules="rules"
            label-width="80px"
    >
      <el-form-item label="栏目名称" prop="name">
        <el-input placeholder="请输入栏目名称" v-model.trim="formData.name" />
      </el-form-item>
      <el-form-item label="栏目排序" prop="sort">
        <el-input placeholder="请输入人栏目排序" v-model.number="formData.sort" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancelColumnDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="dialogColumnStatus == 'create' ? handleCreateColumn() : handleUpdateColumn()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, reactive, ref} from 'vue'
  import {createPackageChannelColumn, updatePackageChannelColumn} from "@/api/package/package";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreateColumn",
    props: {
      dialogColumnVisible: {
        type: Boolean,
        default: false
      },
      dialogColumnStatus: {
        type: String,
        default: 'create'
      },
      dialogColumnFormData: {
        type: Object,
        default() {
          return {
            channelid: undefined,
            columnid: undefined,
            packageid: undefined,
            name: '',
            sort: 1
          }
        }
      }
    },
    emits: ['handleCancelColumnDialog', 'reloadData'],
    setup(props, context) {
      const formData = toRef(props, 'dialogColumnFormData')
      const rules = reactive({
        name: [{required: true, message: '请输入栏目名称', trigger: 'blur'}],
        sort: [{type: 'number', message: '排序必须为数字', trigger: 'blur'}]
      })
      const columnFormDataRef = ref(null)

      /** 关闭弹框 **/
      const handleCancelColumnDialog = () => {
        context.emit('handleCancelColumnDialog')
      }
      /** 创建栏目 **/
      const handleCreateColumn = () => {
        columnFormDataRef.value.validate(valid => {
          if (valid) {
            createPackageChannelColumn(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelColumnDialog()
                context.emit('reloadData')
              }
            })
          }
        })
      }
      /** 编辑栏目 **/
      const handleUpdateColumn = () => {
        columnFormDataRef.value.validate(valid => {
          if (valid) {
            updatePackageChannelColumn(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelColumnDialog()
                context.emit('reloadData')
              }
            })
          }
        })
      }

      return {
        formData,
        rules,
        handleCancelColumnDialog,
        handleCreateColumn,
        handleUpdateColumn,
        columnFormDataRef
      }
    }
  }
</script>

<style scoped>

</style>
